<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>HTML5电子白板</title>
	 <!--图标字体 -->
    <link href="css/fonts.css" rel="stylesheet">

    <!-- Bootstrap -->
    <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="lib/jquery/jquery-3.3.1.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/jquery/jquery.cookie.js"></script>

	<link href="css/index.css" rel="stylesheet">
	
    <!-- fabric Canvas库 -->
    <script src="lib/fabric/fabric.2.2.3.min.js"></script>

    <!-- 调色板插件 -->
    <script src="lib/colorpicker/colorpicker.min.js"></script>
	
	<script src="lib/bootbox/bootbox.min.js"></script>
	
</head>
<body>

<!--白板模式-->
<div id="top-panel">
    <nav class="navbar navbar-default" role="navigation" id="navigation">
            <div class="btn-group middle-vertical" id="modes" data-toggle="buttons">
                <label class="btn btn-default active">
                    <input type="radio" name="modes" id="whiteboard-mode" checked="checked">白板模式
                </label>
                <label class="btn btn-default">
                    <input type="radio" name="modes" id="pdf-mode">PDF演示
                </label>
            </div>
        <div class="btn-group middle-vertical" id="page-controller">
            <button id="prev-page" class="btn btn-default"><span class="icon-left-open"></span> </button>
            <button class="btn btn-default" id="page">
                <span id="current-page">1</span>/<span id="total-page">1</span>
            </button>
            <button id="next-page" class="btn btn-default"><span class="icon-right-open"></span> </button>
        </div>
        <div id="fullscreen-controller" class="icon-resize-full icon-hover" data-toggle="tooltip" data-placement="bottom" title="全屏" data-container="body"></div>
        <div id="slide-play" class="tool-btn" data-toggle="tooltip" data-placement="bottom" title="播放" data-container="body"><img src="icon/play.png" /> </div>
        <div id="user-files-block">
            <div class="icon-folder tool-btn"  id="files" data-toggle="tooltip" data-placement="bottom" title="我的文档" data-container="body" data-target="files-fragment"></div>
            <div class="icon-user tool-btn" id="user" data-toggle="tooltip" data-placement="bottom" title="个人中心" data-container="body" data-target="user-fragment"></div>
            <br/>
            <div class="zero-wrapper">
                <div class="fragment popover bottom" data-condition="logged" id="files-fragment">
                    <div class="arrow"></div>
                    <table class="table table-striped popover-content" id="files-table">
                        <thead>
                        <tr>
                            <th class="file-name"><span>文档名</span><button class="btn btn-success" id="new-file-btn">新建文档</button></th>
                            <th class="file-time">创建时间</th>
                            <th class="file-operation">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="zero-wrapper">
                <div class="fragment popover bottom" id="user-fragment" data-condition="logged">
                    <div class="arrow"></div>
                    <div class="popover-content">
                        <div>
                            <label>用户:</label>
                            <div id="user-tel"></div>
                        </div>
                        <div class="btn-group-vertical">
                            <div class="btn btn-default" id="reset-psw-btn">重置密码</div>
                            <div class="btn btn-danger" id="logout-btn">退出登录</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

<div id="left-float-panel">
    <div id="tools-container">
        <div class="btn-group-vertical" id="tools" data-toggle="buttons">
            <!-- 选择工具 -->
            <label class="btn btn-default tool-btn" data-toggle="tooltip" data-placement="right" data-container="body" title="选择">
                <input type="radio" name="tools" id="selector">
                <span class="icon-select tool-icon" id="tool-select-icon"></span>
            </label>
            <!-- 画笔 -->
            <label class="btn btn-default tool-btn" data-toggle="tooltip" data-placement="right" data-container="body" title="画笔" data-target="pencil-fragment">
                <input type="radio" name="tools" id="pencil" >
                <span class="icon-pencil tool-icon" id="tool-pencil-icon"></span>
            </label>
            <div class="zero-wrapper">
                <div class="fragment popover right" id="pencil-fragment">
                    <div class="arrow right-arrow"></div>
                    <div class="btn-group-vertical" id="pen-size" data-toggle="buttons">
                        <label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:2px"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:3px"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:4px"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:6px"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:8px"></div>
                        </label>
						<label class="btn btn-default">
                            <input type="radio" name="pen-size"><div class="pen-size-line" style="height:10px"></div>
                        </label>
                    </div>
                </div>
            </div>
            <!-- 橡皮擦 -->
            <label class="btn btn-default tool-btn" data-container="body" data-toggle="tooltip" data-placement="right" title="橡皮擦">
                <input type="radio" name="tools" id="eraser">
                <span class="icon-eraser tool-icon" id="tool-eraser-icon"></span>
            </label>

            <!-- 文字工具 -->
            <label class="btn btn-default tool-btn" data-container="body" data-toggle="tooltip" data-target="text-fragment" data-placement="right" title="文字">
                <input type="radio" name="tools" id="text">
                <span class="icon-text tool-icon" id="tool-text-icon"></span>
            </label>
            <div class="zero-wrapper">
                <div class="fragment popover right" id="text-fragment">
                    <div class="arrow right-arrow"></div>
                    <div class="btn-group-vertical" id="text-size-controller">
                        <button class="btn btn-default" id="incTextSize">
                            <div class="icon-plus text-size"></div>
                        </button>
                        <button class="btn btn-default" id="text-size-value"></button>
                        <button class="btn btn-default" id="decTextSize">
                            <div class="icon-minus text-size"></div>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 形状工具 -->
            <label class="btn btn-default tool-btn" data-container="body" data-toggle="tooltip" data-target="shape-fragment" data-placement="right" title="形状">
                <input type="radio" name="tools" id="shape">
                <span class="icon-shape tool-icon" id="tool-shape-icon"></span>
            </label>
            <div class="zero-wrapper">
                <div class="fragment popover right" id="shape-fragment">
                    <div class="arrow right-arrow"></div>
                    <div class="btn-group-vertical" data-toggle="buttons" id="choose-shape">
						<!-- 形状填充色 -->
						<label class="btn btn-default" data-container="body" data-toggle="tooltip" data-placement="right" title="填充" id="shape-fill-label">
							<input type="radio" id="shape-fill" name="choose-shape">
							<div id="shape-fill-color"></div>
						</label>
						<div id="shape-fill-palette">
                            <div id="fill-block">
                                <div id="fill-transparent"></div>
                                <div id="fill-white"></div>
                                <div id="fill-black"></div>
                            </div>
                            <div id="fill-slide"></div>
							<div id="fill-picker"></div>
						</div>
						
                        <label class="btn btn-default">
                            <input type="radio" id="shape-line" name="choose-shape">
                            <div class="shape-line"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="shape-arrow" name="choose-shape">
                            <div class="shape-arrow"></div>
                        </label>

                        <label class="btn btn-default">
                            <input type="radio" name="choose-shape" id="shape-rect">
                            <div class="shape-rect"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="shape-circle" name="choose-shape">
                            <div class="shape-circle"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="shape-triangle" name="choose-shape">
                            <div class="shape-triangle"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="shape-ellipse" name="choose-shape">
                            <div class="shape-ellipse"></div>
                        </label>
                        <label class="btn btn-default">
                            <input type="radio" id="shape-star" name="choose-shape">
                            <div class="shape-star"></div>
                        </label>
                        <!-- <label class="btn btn-default"> -->
                            <!-- <input type="radio" name="choose-shape"> -->
                            <!-- <div class="icon-shape choose-shape"></div> -->
                        <!-- </label> -->
                    </div>
                </div>
            </div>

            <!-- 描边工具 -->
            <label class="btn btn-default tool-btn" data-container="body" data-toggle="tooltip" data-placement="right" title="描边">
                <input type="radio" name="tools" id="brush">
                <span class="icon-brush tool-icon"></span>
            </label>
			
            <!-- 图片工具 -->
            <label class="btn btn-default tool-btn" data-container="body" data-toggle="tooltip" data-placement="right" title="图片">
                <input type="radio" name="tools" id="image">
                <span class="icon-picture tool-icon"></span>
            </label>
        </div>
		<!-- <input type="file" style="display:none" accept="image/*" id="image-input" /> -->
		<br/>
        <!-- 调色板 -->
        <button class="btn btn-default tool-btn" id="palette"
                data-toggle="tooltip" data-placement="right"
                data-target="palette-fragment" title="调色板">
            <span class="icon-palette" id="palette-icon"></span>
        </button>
        <div class="fragment popover bottom" id="palette-fragment">
            <div class="arrow"></div>
            <div id="color-picker-container" class="popover-content">
                <div id="picker"></div>
                <div id="slide"></div>
            </div>
        </div>
    </div>
</div>

<!--绘图区-->
<canvas width="1280" height="720" id="main-canvas"><h2>您的浏览器不支持HTML5的Canvas，建议更换浏览器使用</h2></canvas>
<!--文档loading动画-->
<div id="doc-loading"><div><img id="loading-gif" src="icon/loading.gif"></div></div>

<!--右侧功能按钮-->
<div id="right-float-panel">
    <div id="function-btn-container">
        <label id="doc-save" class="icon-save function-button" data-toggle="tooltip" data-container="body" data-placement="left" title="保存文档"></label><br/>
        <label id="page-delete" class="icon-delete function-button" data-toggle="tooltip" data-container="body" data-placement="left" title="删除当前页面"></label><br/>
        <label id="page-insert" class="icon-page-new function-button" data-toggle="tooltip" data-container="body" data-placement="left" title="插入一页"></label><br/>
        <label id="page-export" class="icon-export function-button" data-toggle="tooltip" data-container="body" data-placement="left" title="导出成图片"></label>
    </div>
</div>

<!--底部栏-->
<div id="bottom-panel">
	<div id="status"></div>
	<div id="file-name-container">
    <label>当前文档： </label><div id="file-name" ></div>
	</div>
</div>

<!-- 提示信息 -->
<div class="panel panel-warning" id="info-panel">
    <div class="panel-body">
        <div id="info-panel-content"></div>
		<div id="info-panel-close">x</div>
    </div>
</div>

<!-- 模态框（Modal） -->
<!-- 注册 -->
<div id="register" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h2 class="text-center">注册</h2>
                <form class="form-group" action="javascript:void(0);" id="reg-form">
                    <label>手机号</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-mobile"></span>
                        <input class="form-control" id="reg-tel" type="number" placeholder="">
                        <span class="input-group-btn">
						<button class="btn btn-default sendcode-btn" id="sendcode-reg" type="button">
							获取验证码
						</button>
					</span>
                    </div>
                    <br/>
                    <label>密码</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-key"></span>
                        <input class="form-control" id="reg-psw" type="password" placeholder="">
                    </div>
                    <br/>
                    <label>验证码</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-number"></span>
                        <input class="form-control" id="reg-code" type="number" placeholder="">
                    </div>
                    <br/>
                    <div id="reg-error"></div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 登录窗口 -->
<div id="login" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h2 class="text-center">登录</h2>
                <br/>
                <form class="form-group" action="" id="login-form">
                    <label>手机号</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-mobile"></span>
                        <input class="form-control" id="login-tel" type="number" placeholder="">
                    </div>
                    <br/>
                    <label>密码</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-key"></span>
                        <input class="form-control" id="login-psw" type="password" placeholder="">
                    </div>
                    <br/>
                    <div id="login-error"></div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">登录</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">注册</a> /
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#reset-password">忘记密码</a>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 重置密码 -->
<div id="reset-password" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
                <h2 class="text-center">重置密码</h2>
                <form class="form-group" action="javascript:void(0);" id="reset-form">
                    <label>手机号</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-mobile"></span>
                        <input class="form-control" id="reset-tel" type="number" placeholder="">
                        <span class="input-group-btn">
						<button class="btn btn-default sendcode-btn" id="sendcode-reset" type="button">
							获取验证码
						</button>
					</span>
                    </div>
                    <br/>
                    <label>新密码</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-key"></span>
                        <input class="form-control" id="reset-psw" type="password" placeholder="">
                    </div>
                    <br/>
                    <label>验证码</label>
                    <div class="input-group">
                        <span class="input-group-addon icon-number"></span>
                        <input class="form-control" id="reset-code" type="number" placeholder="">
                    </div>
                    <br/>
                    <div id="reset-error"></div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--PDF演示层-->
<div id="pdf-panel">
    <div id="pdf-top">
        <nav class="navbar navbar-default" role="navigation" id="pdf-nav">
            <div class="btn-group middle-vertical" id="pdf-page-controller">
                <button class="btn btn-default" id="previous"><span class="icon-left-open"></span> </button>
                <button class="btn btn-default" id="pdf-page"><input id="pageNumber" value="0"/><span id="numPages">/ 0</span></button>
                <button class="btn btn-default" id="next"><span class="icon-right-open"></span> </button>
            </div>
            <div id="highlighter-file-block">
                <button class="btn btn-success" id="pdf-file">选择文件</button>
                <button class="btn btn-default tool-btn" id="highlighter"
                        data-toggle="tooltip" data-placement="bottom"
                        title="荧光笔颜色" data-container="body"
                        data-target="highlighter-fragment">
                    <div class="icon-circle"></div>
                </button>
                <br/>
                <div class="zero-wrapper">
                    <div class="fragment popover bottom" id="highlighter-fragment">
                        <div class="arrow"></div>
                        <div class="popover-content">
                            <span class="color-item" style="background-color: rgb(240,240,100)"></span>
                            <span class="color-item" style="background-color: rgb(255,169,100)"></span>
                            <span class="color-item" style="background-color: rgb(100,255,100)"></span>
                            <span class="color-item" style="background-color: rgb(135,206,235)"></span>
                            <span class="color-item" style="background-color: rgb(150,150,150)"></span>
                            <span class="color-item" style="background-color: rgb(255,192,203)"></span>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </div>
    <div id="pdf-content">
        <iframe src="" id="pdf-content-frame"></iframe>
    </div>
</div>

<script src="js/global.js"></script>
<script src="js/user.js"></script>
<script src="js/doc.js"></script>
<script src="js/index.js"></script>
<script src="js/paint-tools.js"></script>
<script src="js/pdf.js"></script>
</body>
</html>